<template>
  <div class="duty-info">
    <div class="c-head">
      <a>今日值日</a>
    </div>
    <!-- <dl class="dl">
      <dt class="dt">午休值日</dt>
      <dd v-for="(name, i) of lunchDayNames" :key="i" class="dd">{{name.trim()}}</dd>
    </dl> -->
    <dl class="dl">
      <!-- <dt class="dt oth">卫生值日</dt> -->
      <dd v-for="(name, i) of hygieneDayName" :key="i" class="dd">{{name.trim()}}</dd>
    </dl>
  </div>
</template>

<script>
export default {
  name: 'duty-info',
  props: {
    dutyInfo: {
      type: Object,
      default () { return {} }
    }
  },
  computed: {
    hygiene () {
      return this.dutyInfo.hygiene || {}
    },
    lunchBreak () {
      return this.dutyInfo.lunch_break || {}
    },
    lunchDayNames () {
      let arr = this.strToArr(this.lunchBreak.day_name)
      if (arr.length > 2) {
        arr.length = 2
      }
      return arr
    },
    hygieneDayName () {
      let arr = this.strToArr(this.hygiene.day_name)
      if (arr.length > 6) {
        arr.length = 6
      }
      return arr
    }
  },
  methods: {
    strToArr (str) {
      let arr = []
      if (str) {
        arr = str.split(',')
      }
      return arr
    }
  }
}
</script>

<style scoped>
.duty-info {
  width: 245px;
  height: 180px;
  float: left;
}
.c-head {
  width: 150px;
  height: 50px;
  background-image: url(@/components/temp4/imgs/03.png);
  background-size: 100% auto;
  margin-left: -25px;
}

.c-head a {
  display: block;
  width: 150px;
  height: 50px;

  color: #fff;
  text-align: center;
  line-height: 50px;
  font-size: 30px;
}
.dl {
  line-height: 35px;
  margin-left: 20px;
  font-size: 24px;
  color: #333;
  overflow: hidden;
  border-right: dashed 1px #ddd;
  margin-top: 10px;
}
.dt {
  margin-top: 10px;
  color: #41cbec;
  font-size: 26px;
}

.dt.oth {
  color: #9de4b8;
}

.dd {
  float: left;
  width: 50%;
  line-height: 45px;
}
</style>
